<template>
  <div class="home-swiper">
    <swiper class="swiper" :list="list" height="100%" dots-class="custom" dots-position="center" v-model="index" @on-index-change="onIndexChange"></swiper>
    <router-link to="../positionPage" v-if="index == 3 && parseInt(identity) === 1"  class="button">进入</router-link>
    <router-link to="../Talents" v-if="index == 3 && parseInt(identity) === 2"  class="button">进入</router-link>
  </div>
</template>

<script>
import { Swiper } from 'vux'
export default {
  components: {
    Swiper
  },
  data () {
    return {
      index: 0,
      list: [
        {
          img: '../../../static/po2.jpg'
        },
        {
          img: '../../../static/youss.jpg'
        },
        {
          img: '../../../static/youss1.jpg'
        },
        {
          img: '../../../static/youss2.jpg'
        }
      ],
      identity: 1
    }
  },
  mounted () {
    this.identity = localStorage.getItem('identity') ? localStorage.getItem('identity') : 1
    console.log(this.identity)
  },
  methods: {
    onIndexChange (index) {
      this.demo01_index = index
    },
    onConfirm (msg) {
      if (this.identity === 1) {
        this._postentrance(1)
      }
    },
    _postentrance (identityid) {
      this.$http.put('/entrance/up', {
        identity: identityid
      }).then((response) => {
        console.log(response)
      }).catch((errot) => {
        console.log(errot)
      })
    }
  }
}
</script>

<style scoped>
.home-swiper{
  height: 100%;
}
.swiper{
  height: 100%;
  width: 100%;
}
.button{
    position: absolute;
    width: 30%;
    bottom: 15%;
    height: 35px;
    border-radius: 25px;
    background-color: #F34F4E;
    border: 1px solid #F34F4E;
    left: 35%;
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    color: #fff;
    text-align: center;
}
</style>
<style>
.vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-swiper-desc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.4em;
    font-size: 16px;
    padding: 20px 50px 12px 13px;
    margin: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)))!important;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%)!important;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.vux-slider > .vux-indicator > a > .vux-icon-dot, .vux-slider .vux-indicator-right > a > .vux-icon-dot {
    display: inline-block;
    vertical-align: middle;
    width: 12px!important;
    height: 3px!important;
    border-radius: 0px!important;
    background-color: #d0cdd1;
}
</style>

